<template>
  <el-container class="v-hiprint">
    <el-header height="auto">
      <h1>vue-plugin-hiprint打印组件测试</h1>
      <el-row>
        <el-col :span="4">
          <el-select size="mini" v-model="mode" @change="changeModel">
            <el-option v-for="(opt, index) in modeList" :label="opt.name" :value="index" :key="opt.value"></el-option>
          </el-select>
        </el-col>
        <el-col :span="20">
          <el-button-group>
            <el-button v-for="(value, type) in paperTypes" size="mini" :type="curPaperType === type ? 'primary' : 'info'" @click="setPaper(type, value)" :key="type">{{type}}</el-button>
            <el-popover v-model="paperPopVisible" title="设置纸张宽高(mm)" trigger="click">
              <el-button slot="reference" size="mini">自定义纸张</el-button>
              <template>
                <el-input-number v-model="paperWidth" size="mini" :min="0" placeholder="宽(mm)" />
                <el-input-number v-model="paperHeight" size="mini" :min="0" placeholder="高(mm)" />
                <el-button size="mini" type="primary" @click="otherPaper()">确定</el-button>
              </template>
            </el-popover>
          </el-button-group>

          <el-button-group>
            <el-button size="mini" type="primary" @click="preView()">预览</el-button>
          </el-button-group>

          <JsonView :template="template"></JsonView>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="300px">
        <div class="rect-printElement-types hiprintEpContainer"></div>
      </el-aside>
      <el-main>
        <div id="hiprint-printTemplate" class="hiprint-printTemplate"></div>
      </el-main>
      <el-aside width="400px" class="params_setting_container">
        <div class="hinnn-layout-sider">
          <div id="PrintElementOptionSetting"></div>
        </div>
      </el-aside>
    </el-container>
    
    <printPreview ref="preView"></printPreview>
  </el-container>
</template>

<script>
// import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
import printPreview from './preview';
import JsonView from "./json-view";
import providers from './providers'
import TestData from './test-data';
import defaultTemplates from './templates'

let hiprintTemplate;
export default {
  name: 'VDefault',
  components: {JsonView, printPreview},
  data() {
    return {
      template: null,
      // 模版选择
      mode: 0,
      modeList: [],
      curPaper: {type: 'A4', width: 210, height: 296.6},    // 当前纸张
      // 纸张类型
      paperTypes: {
        'A3': {width: 420, height: 296.6},
        'A4': {width: 210, height: 296.6},
        'A4/2': {width: 210, height: 139.7},
        'A4/3': {width: 210, height: 93},
        'A5': {width: 210, height: 147.6},
        'B3': {width: 500, height: 352.6},
        'B4': {width: 250, height: 352.6},
        'B5': {width: 250, height: 175.6}
      },
      // 缩放
      scaleValue: 1,
      scaleMax: 5,
      scaleMin: 0.5,
      // 自定义纸张
      paperPopVisible: false,
      paperWidth: '210',
      paperHeight: '296.6',
      lastjson: '',
    }
  },
  computed: {
    curPaperType() {
      let type = 'other'
      let types = this.paperTypes
      for (const key in types) {
        let item = types[key]
        let {width, height} = this.curPaper
        if (item.width === width && item.height === height) type = key
      }
      return type
    }
  },
  created() {
  },
  mounted() {
    this.init();
    this.otherPaper()
  },
  methods: {
    // 初始化
    init() {
      this.modeList = providers.map((e) => {
        return {type: e.type, name: e.name, value: e.value, data: e.testData, template: e.testData};
      });
      this.mode = 0;
      // disAutoConnect();
      this.changeModel();
    },
    changeModel() {
      let {mode} = this;
      let provider = providers[mode];
      hiprint.init({providers: [provider.f]});
      $('.hiprintEpContainer').empty()
      hiprint.PrintElementTypeManager.build('.hiprintEpContainer', provider.value);
      $('#hiprint-printTemplate').empty()
      let template = defaultTemplates[provider.defaultTemp] ? defaultTemplates[provider.defaultTemp].temp : {}
      // console.log(template);
      this.template = hiprintTemplate = new hiprint.PrintTemplate({
        template: template,
        dataMode: 1, // 1:getJson 其他：getJsonTid 默认1
        history: false, // 是否需要 撤销重做功能
        willOutOfBounds: true, // 是否允许组件内的控件超出范围
        // qtDesigner: true, // 是否开启类似QT Designer的唯一field生成模式
        fontList: [{title: '微软雅黑', value: 'Microsoft YaHei'}, {title: '黑体', value: 'STHeitiSC-Light'}, {title: '思源黑体', value: 'SourceHanSansCN-Normal'},
          {title: '王羲之书法体', value: '王羲之书法体'}, {title: '宋体', value: 'SimSun'}, {title: '华为楷体', value: 'STKaiti'}, {title: 'cursive', value: 'cursive'}],
        onDataChanged: (type, json) => {
          console.log(type); // 新增、移动、删除、修改(参数调整)、大小、旋转
          console.log(json); // 返回 template
          // 更新模板
          // hiprintTemplate.update(json)
          // console.log(hiprintTemplate.historyList)
        },
        onUpdateError: (e) => {
          console.log(e);
        },
        settingContainer: '#PrintElementOptionSetting',
        paginationContainer: '.hiprint-printPagination'
      });
      hiprintTemplate.design('#hiprint-printTemplate', {grid: true});
      // 获取当前放大比例, 当zoom时传true 才会有
      this.scaleValue = hiprintTemplate.editingPanel.scale || 1;
      // console.log(hiprintTemplate);
    },
    /**
     * 设置纸张大小
     * @param type [A3, A4, A5, B3, B4, B5, other]
     * @param value {width,height} mm
     */
    setPaper(type, value) {
      try {
        if (Object.keys(this.paperTypes).includes(type)) {
          this.curPaper = {type: type, width: value.width, height: value.height}
          hiprintTemplate.setPaper(value.width, value.height)
        } else {
          this.curPaper = {type: 'other', width: value.width, height: value.height}
          hiprintTemplate.setPaper(value.width, value.height)
        }
      } catch (e) {
        this.$message.error(`操作失败: ${e}`);
      }
    },
    otherPaper() {
      let value = {};
      value.width = this.paperWidth;
      value.height = this.paperHeight;
      this.paperPopVisible = false;
      this.setPaper('other', value);
    },
    preView() {
      let {width, height} = this.curPaper;
      let {mode} = this;
      let provider = providers[mode];
      this.$refs.preView.show(hiprintTemplate, TestData[provider.testData], width, height);
    }
  }
}
</script>

<style lang="less" scoped>
.v-hiprint {}
</style>